<template>
    <div id="detail">
        <GoodsNavBar @NavBarIndex="NavBarIndex" ref="goodsnavbar" ></GoodsNavBar>
        <PublicScroll ref="scroll" v-bind:probeType="3" @scrollY="detailScroll">
            <GoodsSwiperArea v-bind:banners="topImages"></GoodsSwiperArea>
            <DetailBaseInfo v-bind:goods="goods"></DetailBaseInfo>
            <DetailShopInfo v-bind:shop="shop"></DetailShopInfo>
            <DetailGoodsInfo v-bind:detailInfo="detailInfo" @detailImageLoad="detailImageLoad"></DetailGoodsInfo>
            <DetailParamInfo ref="paraminfo" v-bind:paramInfo="goodsParam"></DetailParamInfo>
            <DetailCommentInfo ref="commentinfo" v-bind:commentInfo="commentInfo"></DetailCommentInfo>
            <GoodsList ref="goodslist" v-bind:goods="detailRecommend" style="padding-bottom: 44px"></GoodsList>
        </PublicScroll>

        <DetailBottomBar v-on:addShopping="addCar"/>
        <BackTop v-on:click.native="backStart" v-show="isShow"/>
        <PublicToast/>
    </div>
</template>
<script>
import PublicScroll from "@/components/common/scroll/PublicScroll";
import PublicToast from "@/components/common/toast/PublicToast";

import GoodsList from "@/components/content/goods/GoodsList";
import BackTop from "@/components/content/backTop/BackTop";

import GoodsNavBar from "@/views/detail/childComps/GoodsNavBar";
import GoodsSwiperArea from "@/views/detail/childComps/GoodsSwiperArea";
import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
import DetailGoodsInfo from "@/views/detail/childComps/DetailGoodsInfo";
import DetailParamInfo from "@/views/detail/childComps/DetailParamInfo";
import DetailCommentInfo from "@/views/detail/childComps/DetailCommentInfo";
import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";

import {getDetail,Goods,Shop,GoodsParam,getRecommend} from  "@/network/detail"

import {itemListenerMixin,backTop} from "@/common/hunru";

import {mapActions} from "vuex"
export default {
    name: "GoodsDeatil",
    data(){
        return{
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            goodsParam:{},
            commentInfo:{},
            detailRecommend:[],
            clearRefresh:null,
            louti:[],
            detailDoudong:null,
        }
    },
    mounted() {
        this.iid=this.$route.params.iid
        getDetail(this.iid).then(res=>{
            this.topImages=res.result.itemInfo.topImages
            this.goods=new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)
            this.shop=new Shop(res.result.shopInfo)
            this.detailInfo=res.result.detailInfo
            this.goodsParam=new GoodsParam(res.result.itemParams.info,res.result.itemParams.rule)
            if(res.result.rate.cRate!==0){
                this.commentInfo=res.result.rate.list[0]
            }
        })
        getRecommend().then(res=>{
            this.detailRecommend=res.data.list
        })
        // this.detailDoudong=debounce(()=>{
        //     this.louti.push(-44)
        //     this.louti.push(this.$refs.paraminfo.$el.offsetTop-44)
        //     this.louti.push(this.$refs.commentinfo.$el.offsetTop-44)
        //     this.louti.push(this.$refs.goodslist.$el.offsetTop-44)
        // },50)
    },
    mixins:[itemListenerMixin,backTop],
    methods: {
        //数组写法
        ...mapActions(['addCart']),
        //对象写法
        // ...mapActions({addToCart:'addCart'}),
        addCar(){
            this.iid=this.$route.params.iid
            const product={}
            product.image=this.topImages[0]
            product.title=this.goods.title
            product.desc=this.detailInfo.desc
            product.price=this.goods.realPrice
            product.iid=this.iid
            // this.$store.commit('addCart',product)
            // this.$store.dispatch('addCart',product).then(res=>{
            //     console.log(res)
            // })
            this.addCart(product).then(res=>{
                this.$toast.show(res,2000)
                // this.toastMessage=res
                // this.toastShow=true
                // setTimeout(()=>{
                //     this.toastMessage=''
                //     this.toastShow=false
                // },800)
            })
            //vuex的对象写法
            // this.addToCart(product).then(res=>{
            //     console.log(res)
            // })
        },
        NavBarIndex(index) {
            this.$refs.scroll.scrollTo(0,-this.louti[index],100)
        },
        detailImageLoad(){
            this.louti.push(-44)
            this.louti.push(this.$refs.paraminfo.$el.offsetTop-44)
            this.louti.push(this.$refs.commentinfo.$el.offsetTop-44)
            this.louti.push(this.$refs.goodslist.$el.offsetTop-44)
            // this.detailDoudong()
        },
        //可以考虑用循环代替
        detailScroll(position){
            this.isShow= -position > 200
            if(-position>0){
                this.isTabControl=-position> this.tabControlTop
            }
            if(-position>=this.louti[0]&&-position<this.louti[1]){
                this.$refs.goodsnavbar.currentIndex=0
            }else if(-position>=this.louti[1]&&-position<this.louti[2]){
                this.$refs.goodsnavbar.currentIndex=1
            }else if(-position>=this.louti[2]&&-position<this.louti[3]){
                this.$refs.goodsnavbar.currentIndex=2
            }else if(-position>=this.louti[3]){
                this.$refs.goodsnavbar.currentIndex=3
            }
        }
    },
    components:{
        PublicScroll,
        GoodsList,BackTop,
        PublicToast,
        GoodsNavBar,GoodsSwiperArea,DetailBaseInfo,DetailShopInfo,DetailGoodsInfo,DetailParamInfo,DetailCommentInfo,DetailBottomBar
    },
    deactivated() {
        this.$bus.$off('itemImageLoad',this.clearRefresh)
        this.$destroy()
    }
}
</script>
<style scoped>
#detail{
    position: relative;
    z-index: 300;
    background-color: #ffffff;
    height: 93vh;
}
</style>
